<template>
  <div class="sell">
    <div><span>发布本条信息将收费10元</span></div>
    <div>
    </div>
    <div>
      <p>房产类型</p>
      <picker
        mode="selector"
        :value="index"
        :range="array"
        @change="bindPickerChange"
      >
        <div class="ipt">
          <span>{{ array[index] }}</span> <span>></span>
        </div>
      </picker>
    </div>
    <div>
      <p>区域</p>
      <picker
        mode="selector"
        :value="index1"
        :range="array1"
        @change="bindPickerChange1"
      >
        <div class="ipt">
          <span>{{ array1[index1] }}</span> <span>></span>
        </div>
      </picker>
    </div>
    <div>
      <p>户型|朝向</p>
      <picker
        mode="selector"
        :value="index2"
        :range="array2"
        @change="bindPickerChange2"
      >
        <div class="ipt">
          <span>{{ array2[index2] }}</span> <span>></span>
        </div>
      </picker>
    </div>
    <div>
      <p>标签</p>
      <div>
        <span
          class="active"
          v-for="item in arr"
          :key="item.id"
          @click="tab(item.id)"
          >{{ item.name }}</span
        >
      </div>
      <div>
        <span v-for="item in arr1" :key="item">{{ item.name }}</span>
      </div>
    </div>
    <div class="auto">
      <div>标题</div>
      <div>
        <span>
          <input type="text" placeholder="请输入" />
        </span>
        <span>></span>
      </div>
    </div>
    <div class="auto">
      <div>描述</div>
      <div>
        <span>
          <input type="text" placeholder="请输入" />
        </span>
        <span>></span>
      </div>
    </div>
    <div class="auto">
      <div>联系人</div>
      <div>
        <span>
          <input type="text" placeholder="梦想^_" />
        </span>
        <span>></span>
      </div>
    </div>
    <div>
      <div>有效时间</div>
      <span>30天</span>
      <div>
        <label
          ><checkbox
            value="checkbox1"
          />已阅读并接受《宏烨找房网房源信息发布规则》</label
        >
      </div>
      <button>发布并支付</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        "请选择",
        "高层住宅",
        "小高层住宅",
        "商铺/门面房",
        "厂房",
        "写字楼",
      ],
      index: 0,
      array1: ["请选择", "主城区", "宿豫区", "宿城新区", "苏宿园区", "开发区"],
      index1: 0,
      array2: ["请选择", "1室", "2室", "3室", "1室1厅", "1室2厅", "1室3厅"],
      index2: 0,
      tag: [
        { id: 1, name: "新上房源", flag: false },
        { id: 2, name: "小户型", flag: false },
        { id: 3, name: "有电梯", flag: false },
        { id: 4, name: "优质教育", flag: false },
        { id: 5, name: "低总价", flag: false },
      ],
      arr: [],
      arr1: [],
    };
  },
  mounted() {
    this.arr = this.tag.filter((item) => !item.flag);
    this.arr1 = this.tag.filter((item) => item.flag);
  },
  methods: {
    bindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.index = e.target.value;
    },
    bindPickerChange1: function (e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.index1 = e.target.value;
    },
    bindPickerChange2: function (e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.index2 = e.target.value;
    },
    tab(id) {
      this.tab = this.tag.map((item) => {
        if (item.id == id) {
          item.flag = !item.flag;
          return item;
        } else {
          return item;
        }
      });
    },
  },
};
</script>

<style lang='scss'>
.sell {
  width: 100%;
  height: 100%;
  > div:nth-child(1) {
    height: 100rpx;
    background: #f8e1e7;
    color: #fc6433;
    span {
      display: inline-block;
      padding: 30rpx 25rpx;
    }
  }
  > div:nth-child(2) {
    display: flex;
    > div:nth-child(1) button {
      width: 100rpx;
      height: 100rpx;
      margin: 40rpx;
    }
    > div:nth-child(2) {
      display: flex;
      p {
        padding: 20rpx 0;
        font-size: 40rpx;
      }
      span {
        display: inline-block;
        width: 90%;
        font-size: 25rpx;
        color: #ccc;
      }
      > div:nth-child(2) {
        height: 150rpx;
        line-height: 150rpx;
        font-size: 50rpx;
        color: #ccc;
      }
    }
  }
  > div:nth-child(3),
  > div:nth-child(4),
  > div:nth-child(5) {
    width: 90%;
    margin: 0 auto;
    border-bottom: 1rpx #eee solid;
    padding: 40rpx 0;
    p {
      font-size: 25rpx;
      padding-bottom: 20rpx;
    }
    .ipt {
      display: flex;
      justify-content: space-between;
    }
  }
  > div:nth-child(6) {
    padding: 20rpx 0;
    .active {
      background: #ccc;
    }
    span {
      display: inline-block;
      padding: 10rpx 20rpx;
      border: 1rpx #ccc solid;
      margin: 10rpx 20rpx;
    }
  }
  > div:nth-child(7),
  > div:nth-child(8),
  > div:nth-child(9) {
    padding: 20rpx 0;
    width: 90%;
    margin: 0 auto;
    > div:nth-child(2) {
      margin: 20rpx 0;
      display: flex;
      justify-content: space-between;
    }
  }
  > div:nth-child(10) {
    width: 90%;
    margin: 30rpx auto;
    margin-top: 40rpx;
    span {
      display: inline-block;
      border: 1rpx #ccc solid;
      padding: 20rpx 40rpx;
    }
    button{
      background: #FE636B;
      color: #fff;
      border-radius: 60rpx;
    }
  }
}
</style>